<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left">
              <span class="pug-page-header-heading-title" title="分步表单">{{ opid ? '修改产品' : "添加产品" }}</span>
              编辑的id是:{{ opid }}
            </div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">
                    酒店管理页用于向用户收集或验证信息，分步酒店管理常见于数据项较多的表单场景。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pug-pro-grid-content">
        <div class="pug-pro-grid-content-children">
          <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
            <div class="pug-pro-page-container-children-content">
              <div v-if="opid" class="pug-card">
                <div class="pug-pro-steps-form-steps-container" style="max-width: 960px;padding: 20px 0">
                  <div class="pug-steps pug-steps-horizontal pug-steps-label-horizontal">
                    <div class="pug-steps-item" @click="next(1)"
                         :class="[currentStep>=1?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">1</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">基本信息</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(2)"
                         :class="[currentStep>=2?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">2</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">图集设置</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(3)"
                         :class="[currentStep>=3?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">3</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">服务项目</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(4)"
                         :class="[currentStep>=4?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">3</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">价格控制</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(5)"
                         :class="[currentStep>=5?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">5</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">地图设置</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(6)"
                         :class="[currentStep>=6?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">6</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">附属信息</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(7)"
                         :class="[currentStep>=7?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">7</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">房型管理</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(8)"
                         :class="[currentStep>=8?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">8</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">发布完成</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!---基础信息 start--->
              <div v-show="currentStep==1" class="pug-card mt20">
                <div class="pug-card-body">
                  <div class="pug-debug-result">{{ hotel }}</div>
                  <div class="pug-row" style="justify-content: center">
                    <div class="pug-col   pug-col-lg-3" style="padding-left: 8px; padding-right: 8px;">
                      <pug-upload @callback="uploadSuccess" modal="2" cref="img" uploadname="img"
                                  v-model="hotel.img" :key="timer"></pug-upload>
                      <div style="display: none;">
                        <pug-input placeholder="请输入封面图" cref="img" v-model="hotel.img" type="text"></pug-input>
                      </div>
                    </div>

                    <div class="pug-col pug-col-lg-8" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                        <input type="hidden" v-model="hotel.id" cref="id"/>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="标题">酒店品牌
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-select :items="brandItems" cref="brandid" showtext="请选中品牌"
                                            @change="selectBrandEvent" v-model="hotel.hotelBrandId"></pug-select>
                                <div style="display: none">
                                  <pug-input placeholder="酒店品牌" cref="hotelBrandId" maxlen="200"
                                             v-model="hotel.hotelBrandId" type="hidden"></pug-input>
                                  <pug-input placeholder="酒店品牌" cref="hotelBrandName" maxlen="200"
                                             v-model="hotel.hotelBrandName" type="hidden"></pug-input>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="标题">标题
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input placeholder="请输入标题" cref="title" maxlen="200" v-model="hotel.title"
                                           type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="描述">描述
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <textarea rows="4" placeholder="请输入描述" id="description" v-model="hotel.description"
                                          maxlength="600" class="pug-input pro-field pro-field-xl"></textarea>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="国家">国家
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input placeholder="请输入国家" cref="contury" maxlen="100" v-model="hotel.contury"
                                           type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="省份">省份
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-select :items="provinces" cref="province" showtext="请选择省份"
                                            @change="selectProviceEvent" v-model="hotel.provincecode"></pug-select>
                                <div style="display: none">
                                  <pug-input type="hidden" placeholder="请输入省份" cref="province" maxlen="100"
                                             v-model="hotel.province"></pug-input>
                                  <pug-input type="hidden" placeholder="请输入省份" cref="provincecode" maxlen="100"
                                             v-model="hotel.provincecode"></pug-input>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="城市">城市
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-select :items="citys" cref="city" :showtext="citytext"
                                            @change="selectCityEvent" :key="timer" v-model="hotel.citycode"></pug-select>
                                <div style="display: none">
                                  <pug-input type="hidden" placeholder="请输入城市" cref="city" maxlen="100"
                                             v-model="hotel.city"></pug-input>
                                  <pug-input type="hidden" placeholder="请输入城市" cref="citycode" maxlen="100"
                                             v-model="hotel.citycode"></pug-input>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="区域">区域
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-select :items="areas" cref="area" :showtext="areatext"
                                            @change="selectAreaEvent" :key="timer" v-model="hotel.areacode"></pug-select>
                                <div style="display: none">
                                  <pug-input type="hidden" placeholder="请输入区域" cref="area" maxlen="100"
                                             v-model="hotel.area"></pug-input>
                                  <pug-input type="hidden" placeholder="请输入区域" cref="areacode" maxlen="100"
                                             v-model="hotel.areacode"></pug-input>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="星级">星级
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-radio v-model="hotel.starlevel" cref="starlevel" :items='[
                                {text:"1星",value:1},
                                {text:"2星",value:2},
                                {text:"3星",value:3},
                                {text:"4星",value:4},
                                {text:"5星",value:5},
                                {text:"6星",value:6}
                              ]' :is-value="false"></pug-radio>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="地址">地址
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input placeholder="请输入地址" cref="address" maxlen="200" v-model="hotel.address"
                                           type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="联系方式">联系方式
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input placeholder="请输入联系方式" cref="phone" maxlen="50" v-model="hotel.phone"
                                           type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="标签">标签
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input placeholder="请输入标签" cref="tags" maxlen="60" v-model="hotel.tags"
                                           type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;">
                          <div class="pug-space-item" style="">
                            <router-link to="/hotel">
                              <button class="pug-btn pug-btn-primary mr10"><span><i
                                class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                            </router-link>
                            <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3"
                                    @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span>
                            </button>
                            <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3"
                                    @click="saveorupdate()"><span><i
                              class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                          </div>
                          <div class="pug-space-item" style="">
                            <button type="button" class="pug-btn" @click="next(2)"><span>下一步</span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!---基础信息 end--->
              <!---图集设置 start--->
              <div v-show="currentStep==2" class="pug-card mt20">
                <div class="pug-card-body">
                  <div class="pug-card">
                    <pug-upload @callback="uploadSuccess2" modal="3" :cref="imglists" uploadname="imglists"
                                :single="false" :key="timer"></pug-upload>
                    <div class="pug-cobox-img">
                      <div v-for="(item) in hotelImageLists"><img :src="item" alt=""></div>
                    </div>
                  </div>
                  <div class="pug-space pug-space-horizontal pug-space-align-center"
                       style="flex-wrap: wrap; gap: 8px;margin-top: 20px;">
                    <div class="pug-space-item" style="">
                      <router-link to="/hotel">
                        <button class="pug-btn pug-btn-primary mr10"><span><i
                          class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                      </router-link>
                      <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span>
                      </button>
                      <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i
                        class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                    </div>
                    <div class="pug-space-item" style="">
                      <button type="button" class="pug-btn" @click="next(3)"><span>下一步</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!---图集设置 end--->

              <!---服务项目 start--->
              <div v-show="currentStep==3" class="pug-card mt20">
                <div class="pug-card-body">
                  <pug-input placeholder="服务项目" cref="hotelServiceItem" maxlen="1000" v-model="hotel.hotelServiceItem"
                             type="text"></pug-input>
                  <div style="margin: 20px 0 5px;background:#fafafa;padding:20px 20px 0;">
                    <!---完整的-->
                    <h3>全部</h3>
                    <ul class="pug-serviceitems">
                      <li class="item" v-for="(item,index) in serviceItems" :key="item.id">
                        <label><input type="checkbox" :checked="item.checked" @click="selectItemEvent(index,$event)"
                                      name="hotelitem">{{ item.title }}</label>
                      </li>
                    </UL>
                  </div>

                  <div style="background:#fafafa;padding:20px;">
                    <!---完整的-->
                    <h3>已选择的</h3>
                    <!---以选择的-->
                    <ul class="pug-serviceitems-selected">
                      <li class="item" v-for="(item,index) in newServiceItems" :key="item.title+item.index">
                        <input type="text" class="sortinp" v-model="item.sort"> {{ item.title }} <a
                        href="javascript:void(0);" @click="delItem(index)" class="del">删除</a>
                      </li>
                    </ul>
                  </div>
                  <div class="pug-space pug-space-horizontal pug-space-align-center"
                       style="flex-wrap: wrap; gap: 8px;">
                    <div class="pug-space-item" style="">
                      <router-link to="/hotel">
                        <button class="pug-btn pug-btn-primary mr10"><span><i
                          class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                      </router-link>
                      <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span>
                      </button>
                      <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i
                        class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                    </div>
                    <div class="pug-space-item" style="">
                      <button type="button" class="pug-btn" @click="next(4)"><span>下一步</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!---服务项目 end--->

              <!---价格设置 start--->
              <div v-show="currentStep==4" class="pug-card mt20">
                <div class="pug-card-body">
                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="价格">价格
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-input placeholder="价格" cref="price" maxlen="50" v-model="hotel.price"
                                     type="text"></pug-input>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="真实价格">真实价格
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-input placeholder="真实价格" cref="realprice" maxlen="50" v-model="hotel.realprice"
                                     type="text"></pug-input>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="浏览数">浏览数
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-input placeholder="浏览数" cref="views" maxlen="50" v-model="hotel.views"
                                     type="text"></pug-input>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="评论数">评论数
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-input placeholder="评论数" cref="comments" maxlen="50" v-model="hotel.comments"
                                     type="text"></pug-input>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="收藏数">收藏数
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-input placeholder="收藏数" cref="collects" maxlen="50" v-model="hotel.collects"
                                     type="text"></pug-input>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="购买人数">购买人数
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-input placeholder="购买人数" cref="buynum" maxlen="50" v-model="hotel.buynum"
                                     type="text"></pug-input>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-space pug-space-horizontal pug-space-align-center"
                       style="flex-wrap: wrap; gap: 8px;">
                    <div class="pug-space-item" style="">
                      <router-link to="/hotel">
                        <button class="pug-btn pug-btn-primary mr10"><span><i
                          class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                      </router-link>
                      <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span>
                      </button>
                      <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i
                        class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                    </div>
                    <div class="pug-space-item" style="">
                      <button type="button" class="pug-btn" @click="next(5)"><span>下一步</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!---价格设置 start--->

              <!---地图设置 start--->
              <div v-show="currentStep==5" class="pug-card mt20">
                <div class="pug-card-body">
                  经度：
                  <pug-input placeholder="经度" cref="lan" maxlen="50" v-model="hotel.lan" type="text"></pug-input>
                  纬度：
                  <pug-input placeholder="纬度" cref="lgt" maxlen="50" v-model="hotel.lgt" type="text"></pug-input>

                  <pug-map @select="selectMapEvent" :id="hotel.id" :lat="hotel.lan" :lng="hotel.lgt"></pug-map>


                  <div class="pug-space pug-space-horizontal pug-space-align-center"
                       style="flex-wrap: wrap; gap: 8px;">
                    <div class="pug-space-item" style="">
                      <router-link to="/hotel">
                        <button class="pug-btn pug-btn-primary mr10"><span><i
                          class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                      </router-link>
                      <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span>
                      </button>
                      <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i
                        class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                    </div>
                    <div class="pug-space-item" style="">
                      <button type="button" class="pug-btn" @click="next(6)"><span>下一步</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!---地图设置 start--->

              <!---附属信息 start--->
              <div v-show="currentStep==6" class="pug-card mt20">
                <div class="pug-card-body">
                  <div class="pug-col pug-form-item-label">
                    <label class="pug-form-item-required" title="通知">通知
                    </label>
                  </div>
                  <pug-input placeholder="通知" cref="advice" maxlen="50" v-model="hotel.advice" type="text"></pug-input>
                  <div>
                    <div v-for="(item,index) in relationArr" class="pug-relation-item">
                      <div class="pug-col pug-form-item-label">
                        <label class="" :title="item.title">
                          <input type="text" v-model="item.title">
                        </label>
                        <p style="margin-top:5px;float:right;"> <button @click="delRelation(index)">删除</button></p>
                      </div>
                      <pug-input placeholder="通知" :cref="index" maxlen="50" v-model="item.content"
                                 type="text"></pug-input>
                    </div>
                    <button class="pug-add-relationbtn" @click="addRelation">添加附属信息</button>
                  </div>
                  <div class="pug-space pug-space-horizontal pug-space-align-center"
                       style="flex-wrap: wrap; gap: 8px;margin-top: 20px">
                    <div class="pug-space-item" style="">
                      <router-link to="/hotel">
                        <button class="pug-btn pug-btn-primary mr10"><span><i
                          class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                      </router-link>
                      <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span>
                      </button>
                      <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i
                        class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                    </div>
                    <div class="pug-space-item" style="">
                      <button type="button" class="pug-btn" @click="next(7)"><span>下一步</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!---附属信息 end--->

              <!---房型控制 start--->
              <div v-show="currentStep==7" class="pug-card mt20">
                <div class="pug-card-body">
                  <div style="display: flex;justify-content: space-between">
                    <select  v-model="hoteltypeid" @change="selectHotelType" style="position: relative;top:10px;width: 50%;margin-right: 20px;height: 32px;outline: none;border:1px solid #ccc;border-radius: 8px;">
                      <option value="">--请选择房型--</option>
                      <option :value="item.id" v-for="(item,index) in hotelTypes">{{item.title}}</option>
                    </select>
                    <button class="pug-add-relationbtn" @click="addHotelType">添加房型</button>
                  </div>
                  <div class="pug-htype-itembox">
                    <div class="pug-htype-itemmain" v-for="(item,index) in hotelTypeArr" :key="item.id">
                      <div class="pug-htype-item">
                        <pug-upload :modal="2" :cref="'htype'+index" @callback="uploadSuccess3"
                                    :cindex="index" :uploadname="'htype'+index" :key="timer"  v-model="item.img"
                                ></pug-upload>
                        <input type="hidden" title="房型图片" v-model="item.img" placeholder="房型图片">
                        <div class="formbox">
                          <label>房型标题：<input type="text" title="房型标题" placeholder="房型标题" v-model="item.title"></label>
                          <label>房型描述：<input type="text" title="房型描述" placeholder="房型描述" v-model="item.description"></label>
                          <div style="display: flex;justify-content: space-between">
                            <label>排序：<input type="text" title="排序" placeholder="排序" v-model="item.sorted"></label>
                            <label>房型标签：<input type="text"  title="多个标签用逗号分割" placeholder="房型标签" v-model="item.tags"></label>
                            <label>房型附属信息1：<input type="text" title="房型附属信息1" placeholder="房型附属信息1" v-model="item.hinfo"></label>
                            <label>房型附属信息2：<input type="text" title="房型附属信息2" placeholder="房型附属信息2" v-model="item.finfo"></label>
                          </div>
                          <div style="display: flex;justify-content: space-between">
                            <label>发布状态：<select name="status" v-model="item.status">
                              <option value="">--请选择--</option>
                              <option value="1">发布</option>
                              <option value="0">不发布</option>
                            </select></label>
                            <label>房型价格：<input type="text" title="房型价格" placeholder="房型价格" v-model="item.price"></label>
                            <label>房型真实价格：<input type="text" title="房型真实价格" placeholder="房型真实价格" v-model="item.realprice"></label>
                            <label>房型库存：<input type="text" title="房型库存" placeholder="房型的库存" v-model="item.storenum"></label>
                          </div>
                        </div>
                      </div>
                      <div v-if="item.id" class="" style="margin-top: 15px;"><button @click="delHoteTypeItem(index)">删除</button></div>
                      <div v-else  class="" style="margin-top: 15px;"><button @click="removeHoteTypeItem(index)">删除</button></div>
                    </div>
                  </div>
                  <div class="pug-space pug-space-horizontal pug-space-align-center"
                       style="flex-wrap: wrap; gap: 8px;margin-top: 20px;">
                    <div class="pug-space-item" style="">
                      <router-link to="/hotel">
                        <button class="pug-btn pug-btn-primary mr10"><span><i
                          class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                      </router-link>
                      <button type="button" class="pug-btn pug-btn-primary mr3"
                              @click="saveHotelType"><span><i
                        class="iconfont icon-quanbudingdan pr3"></i>保存房型</span></button>
                    </div>
                  </div>
                </div>
              </div>
              <!---房型控制 end--->


              <!---发布控制 start--->
              <div v-show="currentStep==8" class="pug-card mt20">
                <div class="pug-card-body">
                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="发布状态">发布状态
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-radio v-model="hotel.status" cref="status" :items='[
                                {text:"已发布",value:1},
                                {text:"未发布",value:0},
                              ]' :is-value="false"></pug-radio>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-row pug-form-item" style="row-gap: 0px;">
                    <div class="pug-col pug-form-item-label">
                      <label class="pug-form-item-required" title="删除状态">删除状态
                      </label>
                    </div>
                    <div class="pug-col pug-form-item-control">
                      <div class="pug-form-item-control-input">
                        <div class="pug-form-item-control-input-content">
                          <pug-radio v-model="hotel.isdelete" cref="isdelete" :items='[
                                {text:"已删除",value:1},
                                {text:"未删除",value:0},
                              ]' :is-value="false"></pug-radio>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="pug-space pug-space-horizontal pug-space-align-center"
                       style="flex-wrap: wrap; gap: 8px;">
                    <div class="pug-space-item" style="">
                      <router-link to="/hotel">
                        <button class="pug-btn pug-btn-primary mr10"><span><i
                          class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button>
                      </router-link>
                      <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span>
                      </button>
                      <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3"
                              @click="saveorupdate()"><span><i
                        class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                    </div>
                  </div>
                </div>
              </div>
              <!---发布控制 end--->
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>

import hotelService from '@/services/hotel'
import hotelBrandService from '@/services/hotelbrand/index'
import hotelTypeService from '@/services/hoteltype/index'
import pcaService from '@/services/pca/index'
import pugMessage from "@/plugins/PugMessage";
import {getById, isEmpty, isNotEmpty} from "@/utils/validate";
import cache from "@/utils/cache"
import pugDialog from "@/plugins/PugDialog";

export default {
  name: "HotelAdd.vue",
  components: {},
  data() {
    return {
      opid: "",
      hotel: {
        id: "", // 主键
        title: "", // 标题
        img: "", // 封面图
        imglists: "", // 图集列表
        description: "", // 描述
        price: "", // 价格
        realprice: "", // 真实价格
        status: 1, // 发布状态
        isdelete: 0, // 删除状态
        views: "", // 浏览数数
        collects: "", // 收藏数
        buynum: "", // 购买数
        lan: "", // 经度
        lgt: "", // 纬度
        relationinfo: "",//附属信息

        contury: "中国", // 国家
        city: "", // 城市
        area: "", // 区域
        province: "", // 省份
        provincecode: "",//省份编号
        citycode: "",//城市编号
        areacode: "",//区域编号

        timer: "",
        starlevel: "", // 星级
        tags: "", // 标签
        hotelBrandId: "", // 酒店品牌分类
        hotelBrandName: "", // 品牌名称
        hotelCategoryId: "1", // 酒店分类
        hotelCategoryName: "酒店", // 酒店分类
        advice: "", // 通知
        hotelServiceItem: "", // 服务项目
        comments: "", // 评论数
        address: "", // 地址
        phone: "", // 联系方式
      },

      // 服务项目数据
      serviceItems: [
        {id: 1, title: "WIFT", "icon": "/pagessub/static/images/wifi.png", checked: false},
        {id: 2, title: "中餐厅", "icon": "/pagessub/static/images/zaocan.png", checked: false},
        {id: 3, title: "叫醒服务", "icon": "/pagessub/static/images/clock.png", checked: false},
        {id: 4, title: "游泳池", "icon": "/pagessub/static/images/dingwei.png", checked: false},
        {id: 5, title: "洗衣机", "icon": "/pagessub/static/images/user-pj.png", checked: false},
        {id: 6, title: "保姆车", "icon": "/pagessub/static/images/food.png", checked: false},
        {id: 7, title: "停车场", "icon": "/pagessub/static/images/parking.png", checked: false}
      ],
      newServiceItems: [],
      // 附属信息
      relationArr: [],
      // 省市区
      provinces: [],
      citys: [],
      areas: [],
      citytext: "请选择城市",
      areatext: "请选择区域",

      // 图集容器
      imglists: [],
      // 品牌分类
      brandItems: [],

      //房型处理
      hotelTypeArr:[],
      hotelTypes:[],
      hotelTypesAll:[],
      hoteltypeid:"",
      // 控制步骤数据
      currentStep: 1,
      steps: [1, 2, 3, 4, 5, 6, 7]
    }
  },

  computed: {
    hotelImageLists() {
      var that = this;
      if (this.hotel.imglists && this.hotel.imglists.length > 0) {
        that.imglists = this.hotel.imglists.split(",");
        return that.imglists;
      } else {
        return [];
      }
    }
  },

  created() {
    // 初始化省份
    this.provinces = pcaService.provinces.map(res => ({"text": res.name, value: res.id}));
    // 初始化品牌
    this.loadBrandIds();
    // 根据id酒店管理明细
    if (!isEmpty(this.$route.params.id)) {
      this.hotel.id = this.$route.params.id;
      this.opid = this.$route.params.id;
      // 加载明细
      this.getDetail();
    } else {
      if (isNotEmpty(cache.local.get("hotel_save"))) {
        this.hotel = cache.local.getJSON("hotel_save")
      }
    }
  },

  watch: {
    hotel: {
      deep: true,
      handler(val, newval) {
        cache.local.setJSON("hotel_save", newval);
      }
    },



    relationArr:{
      deep: true,
      handler(val,newarr) {
        if (newarr && newarr.length > 0) {
          // 这里为什么要调用JSON.parse原因是：数据库存储的是字符串格式。
          this.hotel.relationinfo = JSON.stringify(newarr);
        }
      }
    },

    'hotel.relationinfo': {
      deep: true,
      handler(val) {
        if (val) {
          // 这里为什么要调用JSON.parse原因是：数据库存储的是字符串格式。
          var arr = JSON.parse(val)
          if (arr && arr.length > 0) {
            this.relationArr = arr;
          }
        }
      }
    },


    newServiceItems: {
      deep: true,
      handler(val, newval) {
        if (newval && newval.length > 0) {
          // 实时排序
          this.newServiceItems = newval.sort((a, b) => a.sort - b.sort);
          // 把排好的结果放入服务项数据中
          this.hotel.hotelServiceItem = JSON.stringify(this.newServiceItems);
        }
      }
    }
  },

  methods: {

    // 删除数据库的房型
    delHoteTypeItem(index){
      var id = this.hotelTypeArr[index].id;
      pugDialog.confirm("提示","你确定要删除码?").then(()=>{
          hotelTypeService.delHotelTypeMiddleById(id).then(()=>{
            var htypeid = this.hotelTypeArr[index].hotelTypeId;
            var htyps  = this.hotelTypesAll.find(res=>res.id==htypeid);
            this.hotelTypes.push(htyps);
            this.hotelTypeArr.splice(index,1);
            pugMessage.success("操作成功");
          })
      })
    },

    removeHoteTypeItem(index){
      this.hotelTypeArr.splice(index,1);
    },

    // 保存房型
    saveHotelType(){
      pugDialog.confirm("提示","你确定保存和修改房型吗？").then(res=>{
        // 获取用户添加的方向数据
        var jsonString = JSON.stringify(this.hotelTypeArr);
        // 开始进行整体的保存操作
        hotelTypeService.saveHotelTypeMiddle2(jsonString).then(res=>{
          this.hotelTypeArr = res.data;
          pugMessage.success("操作成功");
        })
      })
    },

    addHotelType(){
      this.timer = new Date().getTime();

      var params = {
        id:"",
        title:"",
        sorted:this.hotelTypeArr.length + 1,
        hotelId:this.opid,
        description:"",
        price:"",
        realprice:"",
        img:"",
        status:0,
        isdelete:0,
        storenum:1,
        hotelTypeId:"",
        dinfo:"",
        finfo:"",
        tags:""
      };

      //假数据
      hotelTypeService.saveHotelTypeMiddle2(params).then(res=>{
        this.hotelTypeArr.unshift(res.data)
      })
    },

    // 添加附属信息
    addRelation(){
        this.relationArr.push({title: "", content: ""})
    },

    // 删除附属属性
    delRelation(index){
      pugDialog.confirm("提示","你确定删除吗").then(res=>{
        this.relationArr.splice(index,1);
      })
    },


    // 点击服务项加载的数据
    selectItemEvent(index, e) {
      // 1: 根据索引获取当前你选择的元素
      var selectItem = this.serviceItems[index];
      // 获取当前元素checkbox的状态
      var checked = e.target.checked;
      if (checked) {
        // 追加元素到新的容器中
        this.serviceItems[index].checked = true;
        var cselectIndex = this.newServiceItems.findIndex(res => res.title == selectItem.title);
        if (cselectIndex == -1) {
          selectItem.sort = this.newServiceItems.length + 1;
          this.newServiceItems.push(selectItem);
        }
      } else {
        this.serviceItems[index].checked = false;
        var selectIndex = this.newServiceItems.findIndex(res => res == selectItem);
        this.newServiceItems.splice(selectIndex, 1);
      }
    },

    // 点击删除选中的元素同时把服务项中全部的对应的元素进行取消
    delItem(index) {
      pugDialog.confirm("提示","你确定删除吗").then(res=> {
        // 获取当前删除元素的对象
        var item = this.newServiceItems[index];
        // 根据当前对象元素和全部服务项目进行查找对应位置
        var selectIndex = this.serviceItems.findIndex(res => res.title == item.title);
        // 然后将其删除
        //this.serviceItems.splice(selectIndex, 1);
        this.serviceItems[selectIndex].checked = false;
        // 然后在将自己删除,注意：这个不能颠倒checked
        this.newServiceItems.splice(index, 1);
      });
    },


    // 点击获取地图的数据
    selectMapEvent(e) {
      this.hotel.lan = e.point.lng;
      this.hotel.lgt = e.point.lat;
    },

    // 加载品牌分类的数据
    async loadBrandIds() {
      try {
        var res = await hotelBrandService.findHotelBrandList()
        this.brandItems = res.data.map(res => {
          return {text: res.title, value: res.id};
        });
      } catch (ex) {
        console.log(ex)
      }
    },

    selectBrandEvent(item) {
      this.hotel.hotelBrandId = item.value;
      this.hotel.hotelBrandName = item.text;
    },

    // 选择省份
    selectProviceEvent(item) {
      var provinceId = item.value;
      this.hotel.province = item.text;
      this.hotel.provincecode = provinceId;
      // 根据省份id查询对应的城市信息赋予citys
      this.areas = [];
      this.hotel.area = "";
      this.hotel.areacode = "";
      this.hotel.city = "";
      this.hotel.citycode = "";
      this.citytext = "请选择城市";
      this.areatext = "请选择区域";
      this.citys = pcaService.getCityArea(provinceId).map(res => ({text: res.name, value: res.id}));
      this.timer = new Date().getTime()

      // 如果默认选中第一个城市就打开下面代码
      //this.hotel.city = this.citys[0].text;
      //this.hotel.citycode = this.citys[0].value;
      // 如果默认选中第一个城市并且选中区域
      //this.areas = pcaService.getCityArea(this.citys[0].value).map(res=>({text:res.name,value:res.id}));
      //this.hotel.area = this.areas[0].text;
      //this.hotel.areacode = this.areas[0].value;
    },

    // 选择城市
    selectCityEvent(item) {
      var cityId = item.value;
      this.hotel.city = item.text;
      this.hotel.citycode = cityId;
      this.hotel.area = "";
      this.hotel.areacode = "";
      this.areatext = "请选择区域";
      // 根据省份id查询对应的城市信息赋予citys
      this.areas = pcaService.getCityArea(cityId).map(res => ({text: res.name, value: res.id}));
    },

    selectAreaEvent(item) {
      this.hotel.area = item.text;
      this.hotel.areacode = item.value;
    },

    // 加载明细
    async getDetail() {
      try {
        const res = await hotelService.getHotel(this.opid);
        this.hotel = res.data;
        this.hotelTypeArr =this.hotel.hotelTypeMiddleList || [];
        this.citys = pcaService.getCityArea(this.hotel.provincecode).map(res => ({text: res.name, value: res.id}));
        this.areas = pcaService.getCityArea(this.hotel.citycode).map(res=>({text:res.name,value:res.id}));
        this.newServiceItems = this.hotel.hotelServiceItem?JSON.parse(this.hotel.hotelServiceItem):[];
        this.serviceItems = this.serviceItems.map(res=>{
          var len = this.newServiceItems.filter(item=>item.title == res.title).length;
          res.checked = len > 0;
          return res;
        })
      } catch (err) {
        pugMessage.error("服务器异常,代号：1025");
      }
    },

    // 1: 保存方法
    async saveorupdate() {
      try {
        // 校验
        const vresult = await this.validator();
        if (!vresult) {
          return;
        }
        pugDialog.confirm('提示', "你确定进行【" + (this.hotel.id ? '更新' : '保存') + "】吗？").then(async () => {
          const res = await hotelService.saveUpdateHotel(this.hotel);
          if (res.status == 200) {
            if (isEmpty(this.hotel.id)) {
              // 重置数据
              this.reset();
              cache.local.remove("hotel_save");
              // 返回列表
              pugMessage.success("添加成功");
              this.$router.push("/hotel/edit/" + res.data.id);
            } else {
              cache.local.remove("hotel_save");
              // 返回列表
              pugMessage.success("修改成功");
            }
          }
        })
      } catch (err) {
        pugMessage.error("服务器异常,代号：1025");
      }
    },

    // 2: 校验
    async validator() {

      if (isEmpty(this.hotel.title)) {
        pugMessage.error("请输入标题");
        getById('title').focus();
        return false;
      }

      if (isEmpty(this.hotel.img)) {
        pugMessage.error("请输入封面图");
        getById('img').focus();
        return false;
      }

      if (isEmpty(this.hotel.imglists)) {
        pugMessage.error("请输入图集列表");
        getById('imglists').focus();
        return false;
      }

      if (isEmpty(this.hotel.description)) {
        pugMessage.error("请输入描述");
        getById('description').focus();
        return false;
      }

      if (isEmpty(this.hotel.price)) {
        pugMessage.error("请输入价格");
        getById('price').focus();
        return false;
      }

      if (isEmpty(this.hotel.realprice)) {
        pugMessage.error("请输入真实价格");
        getById('realprice').focus();
        return false;
      }

      if (isEmpty(this.hotel.lan)) {
        pugMessage.error("请输入经度");
        getById('lan').focus();
        return false;
      }

      if (isEmpty(this.hotel.lgt)) {
        pugMessage.error("请输入纬度");
        getById('lgt').focus();
        return false;
      }

      if (isEmpty(this.hotel.city)) {
        pugMessage.error("请输入城市");
        getById('city').focus();
        return false;
      }

      if (isEmpty(this.hotel.area)) {
        pugMessage.error("请输入区域");
        getById('area').focus();
        return false;
      }

      if (isEmpty(this.hotel.province)) {
        pugMessage.error("请输入省份");
        getById('province').focus();
        return false;
      }

      if (isEmpty(this.hotel.starlevel)) {
        pugMessage.error("请输入星级");
        getById('starlevel').focus();
        return false;
      }

      if (isEmpty(this.hotel.hotelBrandId)) {
        pugMessage.error("请输入酒店品牌分类");
        getById('hotelBrandId').focus();
        return false;
      }


      if (isEmpty(this.hotel.address)) {
        pugMessage.error("请输入地址");
        getById('address').focus();
        return false;
      }

      if (isEmpty(this.hotel.phone)) {
        pugMessage.error("请输入联系方式");
        getById('phone').focus();
        return false;
      }

      return true;
    },

    // 3: 步骤分解
    prev(index) {
      this.timer = new Date().getTime()
      this.currentStep = index;
      if(index == 7){
        this.loadHotelType();
      }
    },

    next(index) {
      this.timer = new Date().getTime()
      this.currentStep = index;
      if(index == 7){
        this.loadHotelType();
      }
    },

    selectHotelType(){
      var index = this.hotelTypes.findIndex(res=>res.id == this.hoteltypeid);
      var hoteltype = this.hotelTypes[index];
      this.timer = new Date().getTime();
      var params = {
        id:"",
        title:hoteltype.title,
        sorted:this.hotelTypeArr.length + 1,
        hotelId:this.opid,
        description:hoteltype.description,
        price:"0",
        realprice:"0",
        img:hoteltype.img,
        status:0,
        isdelete:0,
        storenum:1,
        hotelTypeId:hoteltype.id
      };

      //假数据
      hotelTypeService.saveHotelTypeMiddle2(params).then(res=>{
        params.id = res.data.id;
        this.hotelTypeArr.unshift(params);
        this.hotelTypes.splice(index,1);
      })
    },

    loadHotelType(){
      hotelTypeService.findHotelTypeList().then(res=>{
        var arr = res.data;
        if(arr && arr.length > 0) {
          this.hotelTypesAll = [...res.data];
          var htypes = this.hotel.hotelTypeMiddleList;
          if (htypes && htypes.length > 0) {
            htypes.forEach(res2 => {
              var index = arr.findIndex(r => {
                return r.id == res2.hotelTypeId
              });
              arr.splice(index, 1);
            })
            this.hotelTypes = arr;
          } else {
            this.hotelTypes = arr;
          }
        }
      })
    },

    // 4: 文件上传回调
    uploadSuccess(response) {
      this.hotel.img = response.url;
    },

    uploadSuccess2(response) {
      this.imglists.push(response.url);
      this.hotel.imglists = this.imglists.join(",");
    },

    uploadSuccess3(response,cindex) {
      alert(cindex)
      this.hotelTypeArr[cindex].img = response.url;
    },

    // 5: 重置数据
    reset() {
      this.hotel = {
        citems: [{text: "请选择", value: ""}],
        id: "", // 主键
        title: "", // 标题
        img: "", // 封面图
        imglists: "", // 图集列表
        description: "", // 描述
        price: "", // 价格
        realprice: "", // 真实价格
        status: "", // 发布状态
        isdelete: "", // 删除状态
        views: "", // 浏览数数
        collects: "", // 收藏数
        buynum: "", // 购买数
        lan: "", // 经度
        lgt: "", // 纬度
        contury: "", // 国家
        city: "", // 城市
        area: "", // 区域
        province: "", // 省份
        starlevel: "", // 星级
        hotelCategoryId: "", // 酒店分类
        tags: "", // 标签
        hotelBrandId: "", // 酒店品牌分类
        hotelBrandName: "", // 品牌名称
        hotelCategoryName: "", // 酒店分类
        advice: "", // 通知
        hotelServiceItem: "", // 服务项目
        comments: "", // 评论数
        address: "", // 地址
        phone: "" // 联系方式
      }
    },


  }
}
</script>
<style scoped="">
.pug-cobox-img {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.pug-cobox-img div {
  margin: 10px;
}

.pug-cobox-img div img {
  height: 240px;
}

.bm-view {
  width: 100%;
  height: 300px;
}

.pug-serviceitems {
  display: flex;
}

.pug-serviceitems .item {
  padding: 0 10px;
  margin: 5px 0
}

.pug-serviceitems .item input[type='checkbox'] {
  margin-right: 5px;
}

.pug-serviceitems-selected .item {
  padding: 5px;
  background: #eee;
  margin: 5px;
}

.pug-serviceitems-selected .item .sortinp {
  width: 50px;
  margin-right: 5px;
  text-align: center;
  border: 1px solid #ccc;
  outline: none;
}

.pug-serviceitems-selected .item .del {
  float: right;
}

.pug-add-relationbtn{width: 100%;height:32px;margin: 10px 0;border-radius: 8px;}
.pug-relation-item{background: #eef0f3;padding: 10px;margin: 0 0 10px;}
.pug-relation-item input{border:1px solid #ccc;border-radius:8px;padding: 4px;}
.pug-htype-itemmain{background:#eee;padding:20px;border:1px solid transparent;margin-bottom: 15px;}
.pug-htype-itemmain:hover{background:#fff;border:1px solid #999;}
.pug-htype-item{display: flex;justify-content: flex-start;}
.pug-htype-item .formbox{display: flex;flex-direction: column;margin-left: 20px;flex:1}
.pug-htype-item input[type='text'],.pug-htype-item select{margin: 0 0 6px;border:1px solid #ccc;border-radius: 8px;padding: 4px;height: 24px;line-height: 24px;width: 100%;text-indent: 0.5em;}
.pug-htype-item select{height: 32px;line-height: 32px;}
</style>
